<template>
	<view>
		<picker-view :indicator-style="indicatorStyle" :value="pickeVal" @change="bindChangeDate" class="picker-view">
			<picker-view-column v-show="showYear">
				<view class="item flex-column align-center" v-for="(item,index) in years" :key="index"
					:class=" index == pickeVal[0] ? 'picker-select' : ''">{{item}}年</view>
			</picker-view-column>
			<picker-view-column v-show="showMonth">
				<view class="item flex-column align-center" v-for="(item,index) in months" :key="index"
					:class=" index == pickeVal[1] ? 'picker-select' : ''">{{item}}月</view>
			</picker-view-column>
			<picker-view-column v-show="showDay">
				<view class="item flex-column align-center" v-for="(item,index) in days" :key="index"
					:class=" index == pickeVal[2] ? 'picker-select' : ''">{{item}}日</view>
			</picker-view-column>
			<picker-view-column v-show="showHour">
				<view class="item flex-column align-center" v-for="(item,index) in hours" :key="index"
					:class=" index == pickeVal[3] ? 'picker-select' : ''">{{item}}时</view>
			</picker-view-column>
			<picker-view-column v-show="showMinute">
				<view class="item flex-column align-center" v-for="(item,index) in minutes" :key="index"
					:class=" index == pickeVal[4] ? 'picker-select' : ''">{{item}}分</view>
			</picker-view-column>
			<picker-view-column v-show="showSecond">
				<view class="item flex-column align-center" v-for="(item,index) in seconds" :key="index"
					:class=" index == pickeVal[5] ? 'picker-select' : ''">{{item}}秒</view>
			</picker-view-column>
		</picker-view>
	</view>
</template>

<script>
	export default {
		name: "gc-date-picker",
		props: {
			dateVal: { // 接收当前选中的值
				type: String,
				default: ''
			},
			nowStatus: { // 日期显示范围 past 过去 future 未来 
				type: String,
				default: ''
			},
			yearStart: { // 起始年份
				type: Number,
				default: 2010
			},
			yearEnd: { // 结束年份
				type: Number,
				default: 2050
			},
			showYear:{// 是否显示年
				type: Boolean,
				default: true
			},
			showMonth:{// 是否显示月
				type: Boolean,
				default: true
			},
			showDay:{// 是否显示日
				type: Boolean,
				default: true
			},
			showHour: { // 是否显示小时
				type: Boolean,
				default: true
			},
			showMinute: { // 是否显示分钟
				type: Boolean,
				default: true
			},
			showSecond: { // 是否显示秒
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				years: [],
				months: [],
				days: [],
				hours: [],
				minutes: [],
				seconds: [],
				pickeVal: [],
				indicatorStyle: `height: 50px;`,
				currentDate: ''
			};
		},
		watch: {
			dateVal: {
				handler: function(val, oldVal) {
					this.init(val)
				},
				deep: true
			}
		},
		created() {
			this.init(this.dateVal)
		},
		methods: {
			init: function(val) {
				let date = new Date()
				let _year = date.getFullYear()
				if (val && val.length > 0) {
					date = new Date(val.replace(/^\s+|\s+$/g, ''))
				}
				// 获取对应范围值
				var year = date.getFullYear()
				var month = date.getMonth() + 1
				var day = date.getDate()
				var hour = date.getHours()
				var minute = date.getMinutes()
				var second = date.getSeconds()

				var years = []
				// 年份范围
				let yearIndexStart = this.yearStart
				let yearIndexEnd = this.yearEnd

				if (this.nowStatus == 'past') {
					yearIndexStart = this.yearStart
					yearIndexEnd = _year
				} else if (this.nowStatus == 'future') {
					yearIndexStart = _year
					yearIndexEnd = this.yearEnd
				} else {
					yearIndexStart = this.yearStart
					yearIndexEnd = this.yearEnd
				}
				this.formate(year, month, day, hour, minute)

				// 年份数组
				for (var i = yearIndexStart; i <= yearIndexEnd; i++) {
					years.push(i)
				}
				this.years = years
				// 定义默认选中初始值下标
				let index1 = 0
				let index2 = 0
				let index3 = 0
				let index4 = 0
				let index5 = 0
				let index6 = 0
				// 赋值默认选中日期
				if (this.dateVal) {
					var _date = new Date(this.dateVal.replace(/^\s+|\s+$/g, ''))
					index1 = this.years.findIndex(item => item == _date.getFullYear())
					index1 = index1 >= 0 ? index1 : 0
					index2 = this.months.findIndex(item => item == (_date.getMonth() + 1))
					index2 = index2 >= 0 ? index2 : 0
					index3 = this.days.findIndex(item => item == _date.getDate())
					index3 = index3 >= 0 ? index3 : 0
					index4 = this.hours.findIndex(item => item == _date.getHours())
					index4 = index4 >= 0 ? index4 : 0
					index5 = this.minutes.findIndex(item => item == _date.getMinutes())
					index5 = index5 >= 0 ? index5 : 0
					index6 = this.seconds.findIndex(item => item == _date.getSeconds())
					index6 = index6 >= 0 ? index6 : 0
				} else {
					if (this.nowStatus == 'past') {
						index1 = this.years.length - 1
						index2 = this.months.length - 1
						index3 = this.days.length - 1
						index4 = this.hours.length - 1
						index5 = this.minutes.length - 1
						index6 = this.seconds.length - 1
					} else if (this.nowStatus == 'future') {}
				}

				var time = year + '-' + this.formateShow(month) + '-' + this.formateShow(day) + ' ' + this.formateShow(
					hour) + ':' + this.formateShow(minute) + ':' + this.formateShow(second)
				this.$emit('change', time)

				setTimeout(() => {
					this.pickeVal = [index1, index2, index3, index4, index5, index6]
				}, 50)
			},
			// 监听选择事件
			bindChangeDate: function(e) {
				this.pickeVal = e.detail.value
				var year = parseInt(this.years[this.pickeVal[0]])
				var month = parseInt(this.months[this.pickeVal[1]])
				var day = parseInt(this.days[this.pickeVal[2]])
				var hour = this.showHour ? parseInt(this.hours[this.pickeVal[3]]) : 0
				var minute = this.showMinute ? parseInt(this.minutes[this.pickeVal[4]]) : 0
				var second = this.showSecond ? parseInt(this.seconds[this.pickeVal[5]]) : 0
				// 根据当前年月日时分秒动态计算各自的数组值
				this.formate(year, month, day, hour, minute, true)
			},
			// 动态计算 年月日时分秒
			formate: function(year, month, day, hour, minute, status = false) {
				let date = new Date()
				let totalMonth = 12
				let totalDay = new Date(parseInt(year), parseInt(month), 0).getDate()
				let totalHour = 24
				let totalMinute = 60
				let totalSecond = 60

				let initMonth = 1
				let initDay = 1
				let initHourse = 0
				let initMinute = 0
				let initSecond = 0

				if (this.nowStatus == 'past') {
					// 计算结束临界值
					if (year == date.getFullYear()) {
						totalMonth = date.getMonth() + 1
						if (month == date.getMonth() + 1) {
							totalDay = date.getDate()
							if (this.showHour && day == date.getDate()) {
								totalHour = date.getHours() + 1
								if (this.showMinute && hour == date.getHours()) {
									totalMinute = date.getMinutes() + 1
									if (this.showSecond && minute == date.getMinutes()) {
										totalSecond = date.getSeconds() + 1
									}
								}
							}
						}
					}
				} else if (this.nowStatus == 'future') {
					// 计算开始临界值
					if (year == date.getFullYear()) {
						initMonth = date.getMonth() + 1
						if (month == date.getMonth() + 1) {
							initDay = date.getDate()
							if (this.showHour && day == date.getDate()) {
								initHourse = date.getHours()
								if (this.showMinute && hour == date.getHours()) {
									initMinute = date.getMinutes()
									if (this.showSecond && minute == date.getMinutes()) {
										initSecond = date.getSeconds()
									}
								}
							}
						}
					}
				}
				// 重新赋值 年月日时分秒
				let monthArr = []
				let dayArr = []
				let hourArr = []
				let minuteArr = []
				let secondArr = []

				for (let i = initMonth; i <= totalMonth; i++) {
					monthArr.push(this.formateShow(i))
				}
				this.months = monthArr

				for (let i = initDay; i <= totalDay; i++) {
					dayArr.push(this.formateShow(i))
				}
				this.days = dayArr

				for (let i = initHourse; i < totalHour; i++) {
					hourArr.push(this.formateShow(i))
				}
				this.hours = hourArr

				for (let i = initMinute; i < totalMinute; i++) {
					minuteArr.push(this.formateShow(i))
				}
				this.minutes = minuteArr

				for (let i = initSecond; i < totalSecond; i++) {
					secondArr.push(this.formateShow(i))
				}
				this.seconds = secondArr
				// 判断是否抛出事件
				if (status) {
					let year = parseInt(this.years[this.pickeVal[0]])
					let month = parseInt(this.months[this.pickeVal[1]])
					let day = parseInt(this.days[this.pickeVal[2]])
					let hour = this.showHour ? parseInt(this.hours[this.pickeVal[3]]) : 0
					let minute = this.showMinute ? parseInt(this.minutes[this.pickeVal[4]]) : 0
					let second = this.showSecond ? parseInt(this.seconds[this.pickeVal[5]]) : 0
					let time = year + '-' + this.formateShow(month) + '-' + this.formateShow(day) + ' ' + this
						.formateShow(
							hour) + ':' + this.formateShow(minute) + ':' + this.formateShow(second)

					this.$emit('change', time)
				}
			},
			// 一位数补0
			formateShow: function(val) {
				return parseInt(val) > 9 ? val : '0' + val
			}
		}

	}
</script>

<style>
	.flex-column {
		display: flex;
		flex-direction: column;
	}

	.picker-view {
		height: 150px;
		width: 100%;
	}

	.item {
		height: 50px;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	.picker-select {
		color: #3F86FF;
		font-weight: bold;
		font-size: 16px;
	}
</style>
